<template>
	<div class="header">
		<div class="header_left">
			<div class="title"><span class="icon" :class="titleIcon"></span>{{title}}</div>
			<div class="search">
				<el-input 
				placeholder="请输入关键字"
				prefix-icon="el-icon-search"></el-input>
			</div>
			<div class="dropdown">
				<el-dropdown 
				trigger="click"
				placement="bottom-start">
				  <span class="el-dropdown-link">全校<i class="el-icon-arrow-down el-icon--right"></i></span>
				  <el-dropdown-menu slot="dropdown">
				    <el-dropdown-item>分类1</el-dropdown-item>
				    <el-dropdown-item>分类2</el-dropdown-item>
				  </el-dropdown-menu>
				</el-dropdown>
			</div>
		</div>
		<div class="header_right">
			<span>2019-08-26 12:30</span>
			<span class="split">|</span>
			<span class="el-icon-bell"></span>
			<span class="split">|</span>
			<el-avatar icon="el-icon-user-solid"></el-avatar>
			<span class="username">admin</span>
		</div>
	</div>
</template>
<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			titleIcon: {
				type: String,
				default: ''
			}
		}
	}
</script>
<style>
	.header {
		width: auto;
		height: 61px;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
	}
	.header_left {
		height: 100%;
	}
	.header_right {
		height: 100%;
		display: flex;
		align-items: center;
	}
	.header_left .title {
		height: 100%;
		width: 200px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #204792;
		color: #fff;
		float: left;
	}
	.header_left .icon {
		margin-right: 10px;
	}
	.header_left .search {
		display: flex;
		align-items: center;
		height: 100%;
		box-sizing: border-box;
		padding-left: 20px;
		float: left;
	}
	.header_left .search .el-input__inner {
		height: 28px;
		border-radius: 25px;
	}
	.header_left .search .el-input__icon {
		line-height: 30px;
	}
	.header_left .dropdown {
		height: 100%;
		display: flex;
		align-items: center;
		padding-left: 20px;
		float: left;
	}
	.dropdown .el-dropdown-link {
		color: #f88976;
	}
	.el-dropdown-menu {
		padding: 0!important;
	}
	.header_right span {
		margin: 0 10px;
	}
	.header_right .split {
		color: #ccc;
	}
	.header_right .username {
		margin-left: 0;
		margin-right: 30px;
	}
</style>
